<template>
  <div class="three" id="three"></div>
</template>
<script setup lang="ts">
import * as THREE from "three";
import * as Controls from "three/examples/jsm/controls/OrbitControls.js";
    // 房间
    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    // const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    // 灯光
    const ambientLight = new THREE.AmbientLight(0xffffff);
    // const ambientLight = new THREE.DirectionalLight( 0xffffff, 0.5 )
    // const ambientLight = new THREE.PointLight(0xffffff);
    // const ambientLight = new THREE.SpotLight( 0xffffff )
    scene.add(ambientLight);
    // 摄像头
    const camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    0.1,
    10
    );
    camera.position.z = 5;

    // 渲染
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("app").appendChild(renderer.domElement);
    renderer.setAnimationLoop(animation);
    new Controls.OrbitControls(camera, renderer.domElement);
    console.log(Controls, 'Controls')

    function animation() {
        // mesh.rotation.x += 0.01
        // mesh.rotation.y += 0.01
        renderer.render(scene, camera);
    }
</script>
<style scoped lang="less">
.three {
  color: olive;
  font-size: 30px;
  //   height: 100vh;
  //   width: 100vw;
  background-color: #f7f7f7;
}
</style>
